<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" :width="1400">
    <!-- <div class="mb-8px">
      <el-button @click="submitForm" type="primary" :disabled="formLoading">保存</el-button>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div> -->
    <el-table ref="multipleTableRef" v-loading="loading" :data="craftData" border :max-height="450">
      <el-table-column label="工艺名称" align="center" prop="carftName" />
      <el-table-column label="版本号" align="center" prop="version" />
      <el-table-column label="启用日期" align="center" prop="enableTime" />
      <el-table-column label="停用日期" align="center" prop="stopTime" />
      <el-table-column label="说明" align="center" prop="remark" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="survey(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="mb-20px">
      <el-pagination
        v-model:current-page="queryParams.pageNo"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50, 100]"
        :background="true"
        class="float-right mt-5px mb-20px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </Dialog>
</template>
<script setup lang="ts">
import * as CraftTaskBillApi from '@/api/config/craftTaskBill'
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('历史工艺路线') // 弹窗的标题
const loading = ref(false) // 表单的加载中
const { push } = useRouter()

const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})
const craftData = ref([]) // 表单数据

const taskId = ref()
const typeData = ref()
/** 打开弹窗 */
const open = async (id: number, type) => {
  taskId.value = id
  typeData.value = type
  dialogVisible.value = true
  // 修改时，设置数据
  if (taskId) {
    loading.value = true
    try {
      let params = {
        pageNo: queryParams.pageNo,
        pageSize: queryParams.pageSize,
        taskId: taskId.value
      }
      const data = await CraftTaskBillApi.getCraftCoursePage(params)
      total.value = data.total
      craftData.value = data.list
    } finally {
      loading.value = false
    }
  }
}

/** 页面容量 */
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  open(taskId.value, typeData.value)
}
/** 页面craftSetupDetails */
const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
  open(taskId.value, typeData.value)
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 查看 */
const survey = (id: number) => {
  const formId = taskId.value
  push(
    `/config/config/craftCuttingWeight/craftSetupDetails?id=${id}&type=${typeData.value}&formId=${formId}`
  )
}
</script>
